<template>
	<view class="cors">
		<input type="text" :value="value" v-show="show" class="node" />
		<up-keyboard tips="my" @confirm="qten" @cancel="quxn" @change="valChange" @backspace="backspace" ref="uKeyboard" mode="car" :show="show"></up-keyboard>
		<div class="inp" @click="show = true">
			<u-icon name="edit-pen" color="#d3d3d3" size="28"></u-icon>
			{{value === ''? '我来说两句' : value}}
		</div>
	</view>
</template>

<script setup>
	import axios from 'axios';
import {
		ref,defineEmits 
	} from 'vue';
	
	const emit = defineEmits(['getData'])
	const show = ref(false);
	const value = ref(''); // 输入框的值
	const valChange = (val) => {
	  // 将每次按键的值拼接到value变量中，注意+=写法
	  value.value += val;
	  console.log(value.value);
	};
	
	const backspace = () => {
	  // 删除value的最后一个字符
	  if (value.value.length) {
	    value.value = value.value.substr(0, value.value.length - 1);
	  }
	  console.log(value.value);
	};
	const quxn = ()=>{
		console.log('我的')
		show.value = false
		value.value = ''
	}
	const qten = ()=>{
		show.value = false
		let obj = {
			id:String(Math.random() * 150),
			name:"赵小刚",
			sex:"男",
			birthday:'2024-1-8',
			email:"s.vwcixhyl@iuerteo.la",
			phone:"18673535948",
			wxhao:"18673535948",
			linePhone:"36641",
			workNumber:"8753",
			origin:"重庆",
			schoolEnd:"局放龙可可图指积实学校",
			endTime:"1970-10-19 10:44",
			degree:"初中",
			grade:["工程学"],
			yan:value.value,
		}
		console.log(obj)
		uni.request({
			url: 'http://localhost:3000/addData',
			method: 'POST',
			data: {
				// 请求参数
				obj
			},
			header: {
				// 请求头
				'content-type': 'application/json'
			},
			success: function(res) {
				const {
					data
				} = res.data
				console.log('请求成功', data);
				emit('getData')
			},
			fail: function(err) {
				console.log('请求失败', err);
				// 处理请求失败
			}
		})
	}

</script>

<style lang="scss" scoped>
	.node{
		position: fixed;
		top: 40%;
		background-color: white;
		width: 120%;	
		height: 200rpx;
		z-index: 10000;
	}
	.cors {
		width: 100%;
		height: 100rpx;
		border-top: 1px solid #e4e4e4;
		background-color: white;
		position: fixed;
		bottom: 0rpx;
		padding: 15rpx 40rpx;

		.inp {
			width: 100%;
			height: 100%;
			border-radius: 40rpx;
			border: 2rpx solid #e4e4e4;
			display: flex;
			align-items: center;
			padding: 0px 10rpx;
			color: #cccccc;
			background-color: #f9f9f9;
		}
	}
</style>